<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 11</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app=Vue.createApp({
        data(){
            return{
                list:['dell','lee','teacher'],
                listObject:{
                    firstName:'dell',
                    lastName:'lee',
                    job:'teacher',
                }
            }
        },
        methods:{
            handleClick(){
                // 使用数组的变更函数 push pop shift unshift reverse splice sort
                // this.listObject.push('hello')
                // this.list.pop()
                // this.list.shift();
                // this.list.unshift('hello');
                // this.list.reverse();
                // this.list.splice();
                // this.list.sort();

                // 直接替换数组
                // this.list=['bye','world','work']
                // this.list=['bye','world'].filter(item=>item=='bye');
                // 直接更新数组的内容
                // this.list[1]='哈哈哈哈'

                // 直接添加对象的内容,也可以自动的展示出来
                // this.listObject.age=100;
                // this.listObject.sex="男";
            }
        },
        // template:`
        // <div v-for="(item,index,key) in list">
        //     {{item}}---{{index}}
        // </div>`
        // template:`
        // <div v-for="(value,key,index) in listObject">
        //     {{value}}---{{key}}--{{index}}
        // </div>
        // `
        // template:`
        // <div v-for="(item,index) in list" :key="index">
        //     {{item}}---{{index}}
        // </div>
        // <button @click='handleClick'>新增</button>
        // `
        template:`
        <div v-for="(value,key,index) in listObject" :key="index">
            {{value}}---{{key}}
        </div>
        <button @click='handleClick'>新增</button>
        `
    });
    const vm = app.mount('#root')
</script>